<template>
	<div id="caipiao">
		<ul>
			<li class="game" v-for="(item,key) in allGame" :key="key">
				<!--<img :src="$baseURL+item.icon2" />-->
				<img :src="'http://192.168.2.245:3000'+item.icon2" />
				<span>{{item.cn}}</span>
			</li>
			<li class="addnewgame" @click="show=true">
  				<i class="el-icon-plus"></i>
			</li>
		</ul>
		<addnewlist :show="show"></addnewlist>
		<!--{{allGame}}-->
	</div>
</template>

<script>
	import '../../css/table.css'
	import addnewlist from './addnewlist'
	export default{
		components:{addnewlist},
		data(){
			return{
				show:false
			}
		},
		mounted(){
			this.$store.dispatch("loadallgames")
		},
		computed:{
			allGame(){
				var arr=[];
				var arr1=this.$store.getters.allGames
				for(var i=0;i<arr1.length;i++){
					var p=arr1[i];
					for(var j=0;j<p.games.length;j++){
						arr.push(p.games[j])
					}
				}
				return arr
			}
			
		}
	}
</script>

<style lang="scss">
	#caipiao{
		.addnewgame{
			width: 100px;
			height: 100px;
			border: 1px dashed black;
			line-height: 100px;
			font-size: 20px;
		}
		ul{
			display: flex;
			flex-wrap: wrap;
			.game{
				margin-left: 20px;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>